<template>
  <div
    class="music-bar"
    :class="{ disable: !getCurrentMusic }"
  >
    <div class="music-bar-btns">
      <mp-icon
        class="pointer"
        type="prev"
        :size="36"
        title="上一曲 Ctrl + Left"
        @click="playPrevSong"
      >
      </mp-icon>
      <div
        class="control-play pointer"
        title="播放暂停 Ctrl + Space"
        @click="play"
      >
        <mp-icon
          :type="getPlayingState ? 'pause' : 'play'"
          :size="24"
        >
        </mp-icon>
      </div>
      <mp-icon
        class="pointer"
        type="next"
        :size="36"
        title="下一曲 Ctrl + Right"
        @click="playNextSong"
      >
      </mp-icon>
    </div>
    <div class="music-music">
      <div class="music-bar-info">
        <template v-if="getCurrentMusic">
          {{ getCurrentMusic.name }}
          <span>- {{ getCurrentMusic.singer }}</span>
        </template>
        <template v-else>欢迎使用Tao'sPlayer在线播放器</template>
      </div>
      <div v-if="getCurrentMusic" class="music-bar-time">
        {{ getCurrentTime | format }}/{{ getCurrentMusic.duration % 3600 | format }}
      </div>
      <mp-progress
        :percent="percentMusic"
        :percentProgress="percentProgressMusic"
      ></mp-progress>
    </div>
  </div>
</template>

<script>
import MpProgress from '@/base/mp-progress.vue'
import { format } from '@/utils/utils'
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'audiocontrol',
  filters: {
    format
  },
  computed: {
    percentMusic() {
      const duration = this.getCurrentMusic ? this.getCurrentMusic.duration : null
      return this.getCurrentTime && duration ? this.getCurrentTime / duration : 0
    },
    percentProgressMusic() {
      const duration = this.getCurrentMusic ? this.getCurrentMusic.duration : null
      return this.getCurrentProgressTime && duration ? this.getCurrentProgressTime / duration : 0
    },
    ...mapGetters([
      'getPlayingState',
      'getCurrentMusic',
      'getPlayList',
      'getMediaPlayer',
      'getCurrentTime',
      'getCurrentProgressTime'
    ])
  },
  methods: {
    play() {
      this.$nextTick(() => {
        let audio = this.getMediaPlayer
        this.getPlayingState ? audio.pause() : audio.play()
        this.setPlayingState()
        audio = null
      })
      // let audio = this.getMediaPlayer
      // this.getPlayingState ? audio.pause() : audio.play()
      // this.setPlayingState()
      // audio = null
    },
    ...mapMutations(['setPlayingState']),
    ...mapActions(['playNextSong', 'playPrevSong'])
  },
  components: {
    MpProgress
  }
}
</script>

<style lang="scss" scoped>
.music-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding-bottom: 15px;
  color: #fff;
  &.disable {
    pointer-events: none;
    opacity: 0.6;
  }
  .icon-color {
    color: #fff;
  }
  .music-bar-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 180px;
    cursor: pointer;
    .control-play {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.3);
      .icon-bofang101 {
        transform: translateX(2px);
      }
    }
  }

  .btn-prev {
    width: 19px;
    min-width: 19px;
    height: 20px;
    background-position: 0 -30px;
  }
  .btn-play {
    width: 21px;
    min-width: 21px;
    height: 29px;
    margin: 0 50px;
    background-position: 0 0;
    &.btn-play-pause {
      background-position: -30px 0;
    }
  }
  .btn-next {
    width: 19px;
    min-width: 19px;
    height: 20px;
    background-position: 0 -52px;
  }
  .music-music {
    position: relative;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    padding-left: 40px;
    font-size: $font_size_small;
    color: $text_color_active;
    .music-bar-info {
      height: 15px;
      padding-right: 80px;
      line-height: 15px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .music-bar-time {
      position: absolute;
      top: 0;
      right: 5px;
    }
  }
}
</style>